<template lang="pug">
.searchPage
    .GameTags
        .GameTagsFilter
            .game_tags_header(@dblclick="()=>{checkedTagList.length=0}") Game Tags
            ul
                li(v-for="(item,index) in GameTags.slice(0,20)" )
                    label(:class="{isChecked:checkedTagList.includes(item.id)}") {{item.description}}
                        input(type="checkbox" :value="item.id" v-model="checkedTagList" )
        .GameTagsShow
            ul
                li(v-for="(item,index) in ResultGames" :key="index" )
                    .gameItemCard
                        GameItemCard(:gi="item")

</template>
<script setup lang="ts">
import {onMounted, ref, watchEffect} from 'vue'
import {GameInfoByTags, GetGameInfoAll} from "../../reqApi/Game";
import type {ResultInfo} from "../../utils/types/ResultInfo";
import type {GameObj} from "../../utils/types/Game";
import {LogSuccess} from "../../utils/notification/Index";
import GameItemCard from "../utils/game/GameItemCard.vue";
import {StoreGameInfoSearch} from "../../store";

const checkedTagList = ref<string[]>([])

const GameTags = ref([
    {id: "1", description: "Action"},
    {id: "2", description: "Strategy"},
    {id: "3", description: "RPG"},
    {id: "4", description: "Casual"},
    {id: "9", description: "Racing"},
    {id: "18", description: "Sports"},
    {id: "23", description: "Indie"},
    {id: "25", description: "Adventure"},
    {id: "28", description: "Simulation"},
    {id: "29", description: "Massively Multiplayer"},
    {id: "37", description: "Free to Play"},
    {id: "51", description: "Animation Modeling"},
    {id: "52", description: "Audio Production"},
    {id: "53", description: "Design Illustration"},
    {id: "54", description: "Education"},
    {id: "55", description: "Photo Editing"},
    {id: "56", description: "Software Training"},
    {id: "57", description: "Utilities"},
    {id: "58", description: "Video Production"},
    {id: "59", description: "Web Publishing"},
    {id: "60", description: "Game Development"},
    {id: "70", description: "Early Access"}
])

const ResultGames = ref<GameObj[]>([])
const InitAllGameInfo = () => {
    GetGameInfoAll().then(resp => {
        const result = resp.data as ResultInfo<GameObj[]>
        if (result.success) {
            ResultGames.value = result.data || []
        }
    })
}
const GameByTag = () => {
    if (checkedTagList.value.length <= 0) {
        InitAllGameInfo()
        return
    }
    GameInfoByTags({tag_ids: checkedTagList.value}).then(resp => {
        const result = resp.data as ResultInfo<GameObj[]>;
        LogSuccess(result.msg)
        if (result.success) {
            ResultGames.value = result.data || []
        }

    })

}
const search = StoreGameInfoSearch();
watchEffect(() => {
    ResultGames.value = search.Get() || []
})


watchEffect(() => {
    GameByTag()
})

onMounted(() => {
    InitAllGameInfo()
})

</script>


<style lang="sass" scoped>
@import "../../assets/sass/index/searchPage"


</style>
